<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>websocket测试</title>
</head>

<body>
    <button type="button" id="btn">按钮</button>
    <input type="text" name="" id="demo" value="" />
    <div id="res">接收到的服务器端消息显示区域</div>
</body>

</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" async></script>
<script type="text/javascript">

    // 打开一个 web socket，设定websocket服务器地址和端口
    var ws = new WebSocket("ws://127.0.0.1:3300");
    //开启连接open后客户端处理方法

    ws.onopen = function () {
        // Web Socket 已连接上，在页面中显示消息
        document.getElementById('res').innerHTML = "当前客户端已经连接到websocket服务器";

    };
    // 点击按钮时给websocket服务器端发送消息
    document.getElementById("btn").addEventListener('click', (function () {
        var value = document.getElementById("demo").innerHTML;
        ws.send('22');

    }))

    // 接收消息后客户端处理方法
    ws.onmessage = function (evt) {
        console.log(evt.data);
        document.getElementById("res").text(evt.data);
    }


    // 关闭websocket
    ws.onclose = function () {
        // 关闭 websocket
        alert("连接已关闭...");
    }
</script>